<script setup>
import { PlusOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
const emits = defineEmits(['add', 'init', 'search'])

// 新增按钮点击
const add = () => {
  emits('add')
}
// 刷新
const nickName = ref('')
const phone = ref('')
const roleId = ref(null)
const init = () => {
  nickName.value = ''
  phone.value = ''
  roleId.value = null
  emits('init')
}
// 搜索
const search = () => {
  const othPara = [
    {
      isAdmin: 0,
      isDriver: 0,
      isPurchaser: 0,
      isRepairman: 0,
      isVillageCadres: 0,
    },
    {
      isDriver: 1,
    },
    {
      isRepairman: 1,
    },
    {
      isAdmin: 1,
    },
    {
      isVillageCadres: 1,
    },
    {
      isPurchaser: 1,
    }
  ]
  emits('search', {
    nickName: nickName.value ?? null,
    phone: phone.value ?? null,
    ...othPara[roleId.value]
  })
}
</script>

<template>
  <div class="head">
    <div></div>
    <AButton type="primary" @click="add" v-if="false">
      <PlusOutlined /> 新增
    </AButton>
    <div class="right">
      <a-input @input="search" v-model:value="nickName" placeholder="请输入用户昵称查询" class="com-ipt" allowClear>
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-input @input="search" v-model:value="phone" placeholder="请输入手机号称查询" class="com-ipt" allowClear>
        <template #suffix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-select @change="search" v-model:value="roleId" class="com-ipt" :options="[
        { label: '普通用户', value: 0, },
        { label: '农机操作手', value: 1, },
        { label: '农机维修员', value: 2, },
        { label: '管理员', value: 3, },
        { label: '村级干部', value: 4, },
        { label: '采购专员', value: 5, },
      ]" placeholder="请选择角色" />
      <AButton type="primary" @click="search">
        <SearchOutlined /> 搜索
      </AButton>
      <AButton type="primary" @click="init">
        <RedoOutlined /> 刷新
      </AButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 8px;
  justify-content: space-between;

  .right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
}
</style>